<ion-header>
  <ion-navbar>
    <ion-title>添加定时任务</ion-title>
    <ion-buttons end (click)="delete()">
      <button ion-button icon-only>
        <i class="fal fa-trash-alt" (click)="delete()"></i>
      </button>
    </ion-buttons>
    <ion-buttons end (click)="save()">
      <button ion-button icon-only>
        <i class="fal fa-check-circle"></i>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content>
  <div class="setting1">
    <div class="title">选择执行动作</div>
    <ion-scroll class="scrollHeight" scrollX="true">
      <div demo-box>
        <!-- [ngClass]="{'selected':true}" ico="{{btn.ico}}" -->
        <div #demo demo-item *ngFor="let btn of buttonList;index as i" (click)="changeAction(i)" [ngClass]="{'selected':isSelected(btn)}">
          <layout2button lstyle={{btn.lstyle}} ico={{btn.ico}} color={{btn.color}} t0={{btn.t0}} t1={{btn.t1}}></layout2button>
        </div>
      </div>
    </ion-scroll>
  </div>
  <div class="setting2">
    <div class="title">设定执行时间</div>
    <div class="timebox" (click)="showTimePicker()">
      <span class="time">
        {{timeInfo}}
      </span>
      <div class="arrow">
        <ion-icon name="arrow-forward"></ion-icon>
      </div>
    </div>
  </div>
  <div class="setting3">
    <div>重复设置</div>
    <div h-line></div>
    <div class="daybar">
      <div day (click)="choseDay(0)" [ngClass]="{'chosen':timingData.day[0]=='1'}">
        周日
        <i class="fas fa-check-circle"></i>
      </div>
      <div day (click)="choseDay(1)" [ngClass]="{'chosen':timingData.day[1]=='1'}">
        周一
        <i class="fas fa-check-circle"></i>
      </div>
      <div day (click)="choseDay(2)" [ngClass]="{'chosen':timingData.day[2]=='1'}">
        周二
        <i class="fas fa-check-circle"></i>
      </div>
      <div day (click)="choseDay(3)" [ngClass]="{'chosen':timingData.day[3]=='1'}">
        周三
        <i class="fas fa-check-circle"></i>
      </div>
      <div day (click)="choseDay(4)" [ngClass]="{'chosen':timingData.day[4]=='1'}">
        周四
        <i class="fas fa-check-circle"></i>
      </div>
      <div day (click)="choseDay(5)" [ngClass]="{'chosen':timingData.day[5]=='1'}">
        周五
        <i class="fas fa-check-circle"></i>
      </div>
      <div day (click)="choseDay(6)" [ngClass]="{'chosen':timingData.day[6]=='1'}">
        周六
        <i class="fas fa-check-circle"></i>
      </div>
    </div>
  </div>

</ion-content>